<template>
  <header class="header">
    <div class="header-content">
      <div class="logo-section">
        <div class="logo-wrapper">
          <img :src="logo" alt="Logo">
          <h1>声生知音</h1>
        </div>
        <nav class="nav">
          <ul class="nav-list">
            <li><router-link to="/main" :class="{ active: $route.path === '/main' }">首页</router-link></li>
            <li><router-link to="/main/voice-library"
                :class="{ active: $route.path === '/main/voice-library' }">语音库</router-link></li>
            <li><router-link to="/main/text-to-speech"
                :class="{ active: $route.path === '/main/text-to-speech' }">文本转语音</router-link></li>
            <li><router-link to="/main/standard-voice"
                :class="{ active: $route.path === '/main/standard-voice' }">个性语音讲解</router-link></li>
            <li><router-link to="/main/ppt-creation"
                :class="{ active: $route.path === '/main/ppt-creation' }">课件制作</router-link></li>
            <li class="dropdown">
              <div class="dropdown-toggle" @click.stop="toggleDropdown">
                更多
                <el-icon class="icon-down" :class="{ 'rotate-icon': isDropdownOpen }">
                  <ArrowDown v-if="!isDropdownOpen" />
                  <ArrowUp v-else />
                </el-icon>
              </div>
              <div class="dropdown-menu" :class="{ 'show': isDropdownOpen }">
                <a href="#">使用文档</a>
                <a href="#">API 接口</a>
                <a href="#">技术支持</a>
              </div>
            </li>
          </ul>
        </nav>
      </div>
      <div class="avatar" @click.stop="toggleAvatarMenu">
        <img :src="userStore.userInfo?.avatar || defaultAvatar" alt="Avatar">
        <div class="avatar-menu" :class="{ 'show': isAvatarMenuOpen }">
          <router-link to="/main/user-center"><img :src="PersonIcon" class="menu-icon" />个人中心</router-link>
          <router-link to="/main/user-center?tab=settings"><img :src="SetIcon" class="menu-icon" />账号设置</router-link>
          <a @click="handleLogout"><img :src="LayoutIcon" class="menu-icon" />退出登录</a>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
  import { ElIcon } from 'element-plus';
  import { useRoute } from 'vue-router';
  import PersonIcon from '@/assets/svg/person.svg';
  import LayoutIcon from '@/assets/svg/layout.svg';
  import SetIcon from '@/assets/svg/set.svg';
  import logo from '@/assets/images/navLogo.webp';
  import { useUserStore } from '@/stores/userStore';
  import { useRouter } from 'vue-router';
  import defaultAvatar from '@/assets/svg/default-avatar.svg';
  const userStore = useUserStore();
  const router = useRouter();
  // 下拉菜单状态
  const isDropdownOpen = ref(false);

  // 处理退出登录
  const handleLogout = () => {
    userStore.clearUserData();
    router.push('/login');
  };

  // 切换下拉菜单显示状态
  const toggleDropdown = () => {
    isDropdownOpen.value = !isDropdownOpen.value;
  };

  // 点击外部区域关闭下拉菜单
  const closeDropdown = (event) => {
    const dropdown = document.querySelector('.dropdown');
    if (dropdown && !dropdown.contains(event.target)) {
      isDropdownOpen.value = false;
    }
  };

  // 添加和移除点击事件监听器
  onMounted(() => {
    document.addEventListener('click', closeDropdown);
  });

  onUnmounted(() => {
    document.removeEventListener('click', closeDropdown);
  });

  const isAvatarMenuOpen = ref(false);

  const toggleAvatarMenu = () => {
    isAvatarMenuOpen.value = !isAvatarMenuOpen.value;
  };

  const closeAvatarMenu = (event) => {
    const avatar = document.querySelector('.avatar');
    if (avatar && !avatar.contains(event.target)) {
      isAvatarMenuOpen.value = false;
    }
  };

  onMounted(() => {
    document.addEventListener('click', closeAvatarMenu);
  });

  onUnmounted(() => {
    document.removeEventListener('click', closeAvatarMenu);
  });

  // 在style中添加

</script>

<style lang="scss" scoped>
  /* 
// 全局样式 */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    z-index: 1000;
    border-bottom: 1px solid #e5e7eb;

    .header-content {
      max-width: 97rem;
      margin: 0 auto;
      padding: 16px 0 16px 72px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  /* // Logo区域 */
  .logo-section {
    display: flex;
    align-items: center;
    gap: 48px;
    flex: 1;

    .logo-wrapper {
      display: flex;
      align-items: center;
      gap: 12px;

      img {
        /* width: auto; */
        height: 30px;
        width: 60px;
        object-fit: contain;
        /* background: linear-gradient(45deg, #2563eb, #3b82f6); */
      }

      h1 {
        font-size: 22px;
        font-weight: 600;
        background: linear-gradient(45deg, #2563eb, #3b82f6);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        letter-spacing: 0.05em;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;

      }
    }
  }

  /* // 导航区域 */
  .nav {
    flex: 1;
    margin-right: 90px;

    .nav-list {
      display: flex;
      align-items: center;
      width: 100%;
      justify-content: center;
      gap: 48px;

      li {
        position: relative;

        a {
          display: block;
          padding: 8px 0;
          font-size: 15px;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #2563eb;
            transform: scaleX(0);
            transition: transform 0.3s ease;
          }

          &:hover {
            transform: translateY(-1px);
            color: #2563eb;

            &::after {
              transform: scaleX(1);
            }
          }

          &.active {
            color: #2563eb;

            &::after {
              transform: scaleX(1);
            }
          }
        }
      }
    }
  }

  /* // 下拉菜单 */
  .dropdown {
    position: relative;
    display: inline-block;

    .dropdown-toggle {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 8px 0;
      font-size: 15px;
      font-weight: 500;
      color: #4b5563;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        color: #2563eb;
        background: rgba(37, 99, 235, 0.05);
      }

      .icon-down {
        font-size: 16px;
        margin-left: 4px;
      }
    }

    .dropdown-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 30%;
      min-width: 160px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      padding: 8px 0;

      &.show {
        display: block;
      }

      a {
        margin: 0 0 0 5px;
        display: block;
        color: #374151;
        font-size: 14px;
        transition: all 0.2s ease;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 2px;
          background-color: #2563eb;
          transform: scaleX(0);
          transition: transform 0.3s ease;
        }

        &:hover {
          background: #f3f4f6;
          color: #2563eb;

          &::after {
            transform: scaleX(1);
          }
        }
      }
    }

    .rotate-icon {
      transform: rotate(180deg);
      transition: transform 0.3s ease;
    }
  }

  /* // 头像区域 */
  .avatar {
    position: relative;
    cursor: pointer;

    /* margin-left: 20px; */
    img {
      width: 36px;
      height: 36px;
      border-radius: 50%;
    }

    .avatar-menu {
      position: absolute;
      top: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) translateY(-10px);
      min-width: 110px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      padding: 8px 0;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;

      &.show {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
      }

      a {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 8px 16px;
        color: #374151;
        font-size: 14px;
        transition: all 0.2s ease;
        text-align: left;

        .menu-icon {
          width: 16px;
          height: 16px;
          opacity: 0.65;
        }

        &:hover {
          background: #f3f4f6;
          color: #2563eb;

          .menu-icon {
            opacity: 1;
            filter: invert(40%) sepia(93%) saturate(1352%) hue-rotate(203deg) brightness(97%) contrast(96%);
          }
        }
      }
    }
  }
</style>